import React, {Component} from 'react';
import {TouchableHighlight,Dimensions,Button,Modal, StyleSheet, Text, TouchableOpacity, View,Image} from 'react-native';
import TreeSelect from 'react-native-tree-select';

const {width} = Dimensions.get('window');
export default class CustomAlertDialog extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isVisible: this.props.show,
            rowDate:{}
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({isVisible: nextProps.show});
    }

    closeModal() {
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
    }

    // renderItem(item, i) {
    //     return (
    //         <TouchableOpacity key={i} onPress={this.choose.bind(this, i)} style={styles.item}>

    //             <Text style={styles.itemText}>{item}</Text>
    //         </TouchableOpacity>
    //     );
    // }

    choose(i) {
        if (this.state.isVisible) {
            this.props.callback(i);
            this.closeModal();
        }
    }
    //点击时的事件，返回点击的节点和节点路径{ item, routes, currentNode }
    _onClick(row){
        let data=this.state.rowDates
        console.log("lll")
        if(data&&data.id){
            if(data.id==row.item.id){
                this.setState({
                    rowDate:{}
                })
            }else{
                this.setState({
                    rowDate:row.item
                })
            }
        }else{
            this.setState({
                rowDate:row.item
            })
        }
    }
    //点击叶子节点时的事件，返回点击的节点和节点路径{ item, routes, currentNode }
    _onClickLeaf(row){
        let data=this.state.rowDates
        console.log("uuuu")
        if(data&&data.id){
            if(data.id==row.item.id){
                this.setState({
                    rowDate:{}
                })
            }else{
                this.setState({
                    rowDate:row.item
                })
            }
        }else{
            this.setState({
                rowDate:row.item
            })
        }
    }

    renderDialog() {
        let entityList = this.props.entityList;
        return (
         
            <View style={[styles.modalStyle]}>
                {/* <View style={styles.optArea}>
                    {
                        this.entityList.map((item, i) => this.renderItem(item, i))
                    }
                </View> */}
               
               
              
                {this._untilBtn()}
                <View style={{height:400}}> 
                    <TreeSelect
                        data={entityList}
                        // isOpen
                        // openIds={['A01']}
                        defaultSelectedId={null}
                        isShowTreeId={false}
                        selectType="single"
                        // selectType="multiple"
                        itemStyle={{
                            // backgroudColor: '#8bb0ee',
                            fontSize: 14,
                            color: '#333333',
                        }}
                        selectedItemStyle={{
                            backgroudColor: '#cacaca',
                            fontSize: 16,
                            color: '#171e99',
                        }}
                        onClick={(row)=>this._onClick(row)}
                        onClickLeaf={(row)=>this._onClickLeaf(row)}
                        treeNodeStyle={{

                        // openIcon: <Icon size={18} color="#171e99" style={{ marginRight: 10 }} name="ios-arrow-down" />,
                        // closeIcon: <Icon size={18} color="#171e99" style={{ marginRight: 10 }} name="ios-arrow-forward" />
                        openIcon: <Image
                            resizeMode="stretch"
                            style={{ width: 18, height: 18 }}
                            source={require('../../assets/images/item/down.png')} />,
                        closeIcon: <Image
                            resizeMode="stretch"
                            style={{ width: 18, height: 18 }}
                            source={require('../../assets/images/item/right.png')} />
                        }}
                    />
                </View>
                   
            </View>
      
        )
    }

    _onChange(num){
        // num 1取消 2确认
        let data=this.state.rowDate
        if(num===1){

        }else if(num===2){
            this.props.callback(data)
        }
        this.closeModal()
    }

    _untilBtn(){
        return(
            <View
                style={{
                    width:'100%',
                    height:36,
                    fontSize:14,
                    flexDirection:"row",
                    justifyContent:"space-between",
                    paddingLeft:10,
                    paddingRight:10,
                    backgroundColor:"#cacaca",
                    alignItems:'center'
                }}
            >
                <TouchableHighlight
                    activeOpacity={1}
                    style={{height:30,paddingLeft:4,paddingRight:4,backgroundColor:'#1890ff',borderRadius:4}}
                    onPress={()=>{
                        this._onChange(1)
                    }}
                >
                    <Text  style={{color:'#ffffff',marginTop:2}}>取消</Text>
                </TouchableHighlight>
                <TouchableHighlight
                    activeOpacity={1}
                    style={{height:30,paddingLeft:4,paddingRight:4,backgroundColor:'#1890ff',borderRadius:4}}
                    onPress={()=>{
                        this._onChange(2)
                    }}
                >
                    <Text  style={{color:'#ffffff',marginTop:2}}>确认</Text>
                </TouchableHighlight>
               
            </View> 
        )
    }

    render() {
        return (
            <View>
                <Modal
                    transparent={true}
                    visible={this.state.isVisible}
                    animationType={'fade'}
                    onRequestClose={() => {
                        // this.closeModal()
                    }}>
                    
                    <TouchableOpacity style={[styles.container]} activeOpacity={1}
                                      onPress={() => {}}>
                        {this.renderDialog()}
                    </TouchableOpacity>
                    {/* <ScrollView>
                        
                    </ScrollView> */}
                </Modal>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
    },
    modalStyle: {
        position: "absolute",
        left: 0,
        bottom: 0,
        width: width,
        flex: 1,
        flexDirection: "column",
        backgroundColor: '#ffffff',
    },
    optArea: {
        flex: 1,
        flexDirection: 'column',
        marginTop: 12,
        marginBottom: 12,
    },
    item: {
        width: width,
        height: 40,
        paddingLeft: 20,
        paddingRight: 20,
        alignItems: 'center',
    },
    itemText: {
        fontSize: 16,
    },
    cancel: {
        width: width,
        height: 30,
        marginTop: 12,
        alignItems: 'center',
        backgroundColor: '#ffffff'
    },
});